<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<!--引入Vue库-->
<script src="vue.js"></script>
<style>
  * {
      margin: 0;
      padding: 0;
  }
  ul li {
      list-style: none;
      float: left;
      width: 30px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      color: rgba(255,255,255,.8);
      font-size: 14px;
  }
  .banner {
      max-width: 750px;
      margin: 0 auto;
      position: relative;
      margin-top: 60px;
  }
  .banner img {
      width: 100%;
      display: block;
  }
  .banner .page {
      background: rgba(0,0,0,.5);
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
  }
  .banner .page ul {
      float: right;
  }
  .current {
      color: #ff6700;
  }
</style>
</head>
<body>	
  <!-- 定义唯一根元素div -->
  <div id="app" >
  <div class="banner">
    <div class="item">
        <img :src="dataList[currentIndex]">
    </div>
    <div class="page" v-if="this.dataList.length > 1">
      <ul>
        <li @click="gotoPage(prevIndex)">&lt;</li>
        <li v-for="(item,index) in dataList"  
			@click="gotoPage(index)" 
			:class="{'current':currentIndex == index}">{{ index+1 }}</li>
        <li @click="gotoPage(nextIndex)">&gt;</li>
      </ul>
    </div>
</div>	  
</div>  
<script>
<!--创建Vue的对象，并把数据绑定到上面创建好的div。-->
var vm=new Vue({   // 创建Vue对象
    el: '#app',    // el属性：通过el与div元素绑定，#app是id选择器
    data: {
      dataList:["./img/w01.jpg",
                "./img/w02.jpg",
                "./img/w03.jpg"
               ],
      currentIndex: 0,   //默认显示图片
      timer: null       //定时器
    },
    methods: {
      gotoPage(index) {
          this.currentIndex = index;
      }
    },
    computed: {
      //上一张
      prevIndex() {
          if(this.currentIndex == 0) {
            return this.dataList.length - 1;
          }else{
            return this.currentIndex - 1;
          }
       },
      //下一张
      nextIndex() {
          if(this.currentIndex == this.dataList.length - 1) {
            return 0;
          }else {
            return this.currentIndex + 1;
          }
       }
    },
    created(){
       // this的指向问题,能用箭头函数不用匿名函数
       //匿名函数改成箭头函数 this代指vue
       //定时器
      this.timer = setInterval(() => {//this是 vue 对象
                  this.gotoPage(this.nextIndex)
                   }, 2000)//自动循环播放图片，2秒播放一次
   }
})
</script>
</body>
</html>